<!--
 Copyright 2023 The CubeFS Authors.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
 implied. See the License for the specific language governing
 permissions and limitations under the License.
-->

<template>
  <div>
    <el-card class="height mg-lf-s">
      <div class="justify-content-around">
        <CircleCharts
          v-for="(item, index) in chartData"
          :key="index"
          :e-data="item.data"
          :title="item.title"
          :color="['#00DAB3', '#ff0000']"
          @showDialog="showDialog"
        ></CircleCharts>
      </div>
      <div class="justify-content-around" style="margin-top: 20px;">
        <CircleCharts
          v-for="(item, index) in mpDpchartData"
          :key="index"
          :e-data="item.data"
          :title="item.title"
          :value-format="mpDpChartValueFormat"
          @showDialog="showDialog"
        >
        </CircleCharts>
      </div>
    </el-card>
    <el-dialog
      v-if="DiskDialogVisible"
      :title="$t('common.broken')"
      width="65%"
      top="10vh"
      :visible.sync="DiskDialogVisible"
      center
    >
      <div style="margin-bottom: 10px; text-align: right;">
        <el-button type="primary" @click="batchOfflineDisk">{{ $t('common.batch') }}{{ $t('common.offline') }}</el-button>
      </div>
      <el-table
        :data="diskTableData"
        style="width: 100%"
        @selection-change="handleSelectionDiskData"
      >
        <el-table-column type="selection" width="80"></el-table-column>
        <el-table-column
          :label="$t('common.id')"
          type="index"
        >
        </el-table-column>
        <el-table-column
          label="Path"
          prop="Path"
        ></el-table-column>
        <el-table-column label="IDs">
          <template slot-scope="scope">
            <span v-for="item in scope.row.PartitionIDs" :key="item">{{ item }}
            </span></template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
      v-if="DataPartitionDetailDialogVisible"
      :title="$t('common.broken') + 'DP' + $t('common.detail')"
      width="65%"
      :visible.sync="DataPartitionDetailDialogVisible"
      center
    >
      <el-table
        :data="PartitionTableData"
        style="width: 100%"
      >
        <el-table-column
          :label="$t('common.partitionid')"
          prop="PartitionID"
          :width="100"
        ></el-table-column>
        <el-table-column :label="$t('common.volumename')" prop="VolName"></el-table-column>
        <el-table-column
          :label="$t('common.copies')"
          prop="ReplicaNum"
        ></el-table-column>
        <el-table-column label="isRecovering" :width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.IsRecover }}</span>
          </template>
        </el-table-column>
        <el-table-column label="Leader" prop="Leader" width="180"></el-table-column>
        <el-table-column label="Members" width="180">
          <template slot-scope="scope">
            <div v-for="item in scope.row.Members" :key="item">{{ item }}</div>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('common.status')"
          prop="Status"
          :width="150"
        ></el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
      v-if="DataPartitionDialogVisible"
      :title="$t('common.broken') + 'DP'"
      width="65%"
      :visible.sync="DataPartitionDialogVisible"
      center
      top="5vh"
    >
      <div>{{ $t('volume.copymiss') }}</div>
      <el-table
        max-height="350"
        :data="LackReplicaDataPartitionIDs"
        style="width: 100%"
      >
        <el-table-column
          :label="$t('common.id')"
          type="index"
        >
        </el-table-column>
        <el-table-column
          :label="$t('common.partitionid')"
          prop="id"
        >
          <template slot-scope="scope">
            <div>{{ scope.row }}</div>
          </template></el-table-column>
        <el-table-column
          :label="$t('common.copies')"
          prop="ReplicaNum"
        ></el-table-column>
        <el-table-column
          :label="$t('common.action')"
        >
          <template slot-scope="scope">
            <el-button
              size="medium"
              type="text"
              @click="showDetail(scope.row, 2)"
            >{{ $t('common.detail') }}</el-button>
          </template>
          ></el-table-column>
      </el-table>
      <div>{{ $t('volume.leadermiss') }}</div>
      <el-table
        max-height="300"
        :data="CorruptDataPartitionIDs"
        style="margin-top:5px"
      >
        <el-table-column
          :label="$t('common.id')"
          type="index"
        >
        </el-table-column>
        <el-table-column
          :label="$t('common.partitionid')"
          prop="id"
        >
          <template slot-scope="scope">
            <div>{{ scope.row }}</div>
          </template></el-table-column>
        <el-table-column
          :label="$t('common.copies')"
          prop="ReplicaNum"
        ></el-table-column>
        <el-table-column
          :label="$t('common.action')"
        >
          <template slot-scope="scope">
            <el-button
              size="medium"
              type="text"
              @click="showDetail(scope.row, 2)"
            >{{ $t('common.detail') }}</el-button>
          </template>
          ></el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
      v-if="MetaPartitionDialogVisible"
      :title="$t('common.broken') + 'MP'"
      width="65%"
      :visible.sync="MetaPartitionDialogVisible"
      center
      top="5vh"
    >
      <div>{{ $t('volume.copymiss') }}</div>
      <el-table
        max-height="350"
        :data="LackReplicaMetaPartitionIDs"
        style="width: 100%"
      >
        <el-table-column
          :label="$t('common.id')"
          type="index"
        >
        </el-table-column>
        <el-table-column
          :label="$t('common.partitionid')"
          prop="id"
        >
          <template slot-scope="scope">
            <div>{{ scope.row }}</div>
          </template></el-table-column>
        <el-table-column
          :label="$t('common.action')"
        >
          <template slot-scope="scope">
            <el-button
              size="medium"
              type="text"
              @click="showDetail(scope.row, 1)"
            >{{ $t('common.detail') }}</el-button>
          </template>
          ></el-table-column>
      </el-table>
      <div>{{ $t('volume.leadermiss') }}</div>
      <el-table
        max-height="300"
        :data="CorruptMetaPartitionIDs"
        style="margin-top:5px"
      >
        <el-table-column
          :label="$t('common.id')"
          type="index"
        >
        </el-table-column>
        <el-table-column
          :label="$t('common.partitionid')"
          prop="id"
        >
          <template slot-scope="scope">
            <div>{{ scope.row }}</div>
          </template></el-table-column>
        <el-table-column
          :label="$t('common.action')"
        >
          <template slot-scope="scope">
            <el-button
              size="medium"
              type="text"
              @click="showDetail(scope.row, 1)"
            >{{ $t('common.detail') }}</el-button>
          </template>
          ></el-table-column>
      </el-table>
      <!-- <span>点击查看详情</span>
      <div><a v-for="item in badDataPartition" :key="item" style="margin-left:5px" @click="showDetail(item)">{{ item }}</a></div> -->
      <!-- <o-page-table
        :columns="tableColumns"
        :data="tableData"
        :has-page="false"
      >
      </o-page-table> -->
    </el-dialog>
    <el-dialog
      v-if="MetaPartitionDetailDialogVisible"
      :title="$t('common.broken') + 'MP' + $t('common.detail')"
      width="65%"
      :visible.sync="MetaPartitionDetailDialogVisible"
      center
    >
      <el-table
        :data="metaPartitionTableData"
        style="width: 100%"
      >
        <el-table-column
          :label="$t('common.partitionid')"
          prop="PartitionID"
          :width="80"
        ></el-table-column>
        <el-table-column :label="$t('common.volumename')" prop="VolName"></el-table-column>
        <el-table-column label="Start" prop="Start"></el-table-column>
        <el-table-column label="End" prop="End"></el-table-column>
        <el-table-column
          :width="120"
          label="DentryCount"
          prop="DentryCount"
        ></el-table-column>
        <el-table-column
          :width="120"
          label="InodeCount"
          prop="InodeCount"
        ></el-table-column>
        <el-table-column
          :width="120"
          label="MaxInodeID"
          prop="MaxInodeID"
        ></el-table-column>
        <el-table-column label="isRecovering" :width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.IsRecover }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="Leader"
          prop="Leader"
          :width="150"
        ></el-table-column>
        <el-table-column label="Members" prop="Members" :width="150">
          <template slot-scope="scope">
            <div v-for="item in scope.row.Members" :key="item">{{ item }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('common.status')" prop="Status" :width="90"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import { getDataNodeList, getBadDataP, getBadMetaP, getMetaNodeList, getDataNodeDiskList, getDataPartitionList, getMetaPartitionList, batchOfflineDisk } from '@/api/cfs/cluster'
import { mapGetters } from 'vuex'
import CircleCharts from '@/components/circleCharts.vue'
import { toByte, renderSize } from '@/utils'
export default {
  name: '',
  components: { CircleCharts },
  props: {
    clusterInfo: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      chartData: [],
      mpDpchartData: [],
      dataPartition: 0,
      metaPartition: 0,
      badDataPartitionNum: 0,
      badMetaPartitionNum: 0,
      diskNum: 0,
      badDiskNum: 0,
      badDataPartition: [],
      badMetaPartition: [],
      DiskDialogVisible: false,
      DataPartitionDialogVisible: false,
      DataPartitionDetailDialogVisible: false,
      MetaPartitionDialogVisible: false,
      MetaPartitionDetailDialogVisible: false,
      PartitionTableData: [],
      MetaPartitionTableData: [],
      LackReplicaDataPartitionIDs: [],
      CorruptDataPartitionIDs: [],
      LackReplicaMetaPartitionIDs: [],
      CorruptMetaPartitionIDs: [],
      diskTableData: [
        {
          PartitionIDs: [
            7569,
            7567,
          ],
          Path: '10.52.136.208:17310:/home/service/var/data1',
        },
      ],
      seletedDisk: [],
      health: this.$t('common.health'),
      unhealthy: this.$t('common.unhealthy'),
      broken: this.$t('common.broken'),
    }
  },
  computed: {
    ...mapGetters('clusterInfoModule', {
      curClusterInfo: 'clusterInfog',
    }),
    tableColumns() {
      return [
        {
          title: 'Path',
          key: 'diskPath',
        },
        {
          title: 'id',
          key: 'id',
        },
      ]
    },
  },
  watch: {},
  async created() {
    await this.getDataPartition()
    await this.getMetaPartition()
    this.calcMpDpData()
    this.getMpDpStatus()
  },
  beforeMount() { },
  mounted() { },
  methods: {
    mpDpChartValueFormat(value) {
      return renderSize(value)
    },
    newArrFn(arr) {
      const newArr = []
      for (let i = 0; i < arr.length; i++) {
        newArr.indexOf(arr[i]) === -1 ? newArr.push(arr[i]) : newArr
      }
      return newArr
    },
    async getDataPartition() {
      const res = await getDataNodeList({
        cluster_name: this.curClusterInfo.clusterName,
      })
      const tempData = res.data
      let normalNode = 0
      let badNode = 0
      for (let i = 0; i < tempData.length; i++) {
        if (tempData[i].status === 'Active') {
          normalNode++
        } else {
          badNode++
        }
        const res = await getDataNodeDiskList({ addr: tempData[i].addr, cluster_name: this.curClusterInfo.clusterName })
        this.diskNum += res.data.length
        this.badDiskNum += tempData[i].bad_disks?.length || 0
        this.dataPartition += tempData[i].partition_count
      }
      this.chartData.push({ data: [{ name: 'common.health', value: this.diskNum - this.badDiskNum }, { name: 'common.broken', value: this.badDiskNum }], title: 'common.disk' })
      this.chartData.push({ data: [{ name: 'common.health', value: normalNode }, { name: 'common.unhealthy', value: badNode }], title: 'common.datanodes' })
    },
    async getMetaPartition() {
      const res = await getMetaNodeList({
        cluster_name: this.curClusterInfo.clusterName,
      })
      const tempData = res.data
      let normalNode = 0
      let badNode = 0
      tempData.forEach(item => {
        if (item.status === 'Active') {
          normalNode++
        } else {
          badNode++
        }
        this.metaPartition += item.partition_count
      })
      this.chartData.push({ data: [{ name: 'common.health', value: normalNode }, { name: 'common.unhealthy', value: badNode }], title: 'common.metanodes' })
    },
    async getMpDpStatus() {
      const res = await getBadDataP({ cluster_name: this.curClusterInfo.clusterName })
      this.LackReplicaDataPartitionIDs = res.data.LackReplicaDataPartitionIDs
      this.CorruptDataPartitionIDs = res.data.CorruptDataPartitionIDs
      this.badDataPartition = this.newArrFn(res.data.LackReplicaDataPartitionIDs.concat(res.data.CorruptDataPartitionIDs))
      this.badDataPartitionNum = this.badDataPartition.length
      this.diskTableData = res.data.BadDataPartitionIDs
      const res1 = await getBadMetaP({ cluster_name: this.curClusterInfo.clusterName })
      // this.LackReplicaMetaPartitionIDs = ['265', '266']
      this.LackReplicaMetaPartitionIDs = res1.data.LackReplicaMetaPartitionIDs
      this.CorruptMetaPartitionIDs = res1.data.CorruptMetaPartitionIDs
      this.badMetaPartition = this.newArrFn(res1.data.LackReplicaMetaPartitionIDs.concat(res1.data.CorruptMetaPartitionIDs))
      this.badMetaPartitionNum = this.badMetaPartition.length
      // this.chartData.push({ data: [{ name: '正常', value: this.dataPartition - this.badDataPartitionNum }, { name: '损坏', value: this.badDataPartitionNum }], title: 'DP状态' })
      // this.chartData.push({ data: [{ name: '正常', value: this.metaPartition - this.badMetaPartitionNum }, { name: '损坏', value: this.badMetaPartitionNum }], title: 'MP状态' })
    },
    calcMpDpData() {
      const { data_total: dataTotal, data_used: dataUsed, meta_total: metaTotal, meta_used: metaUsed } = this.curClusterInfo.clusterInfo

      const calcData = (total, used) => {
        const unitTotal = total.match(/[a-z|A-Z]+/gi)[0]
        const unitUsed = used.match(/[a-z|A-Z]+/gi)[0]
        const newTotal = toByte(Number(total.match(/\d+(\.\d+)?/gi)[0]), unitTotal)
        const newUsed = toByte(Number(used.match(/\d+(\.\d+)?/gi)[0]), unitUsed)
        return {
          totol: newTotal,
          used: newUsed,
          noUsed: newTotal - newUsed,
        }
      }
      const dataInfo = calcData(dataTotal, dataUsed)
      const metaInfo = calcData(metaTotal, metaUsed)
      this.mpDpchartData.push({ data: [{ name: 'common.used' , value: dataInfo.used }, {name: 'common.free' , value: dataInfo.noUsed}], title: 'common.datausage' })
      this.mpDpchartData.push({ data: [{ name: 'common.used' , value: metaInfo.used }, {name: 'common.free' , value: metaInfo.noUsed}], title: 'common.metausage' })
    },
    showDialog(name) {
      const disk = this.$t('common.disk')
      const DP = 'DP' + this.$t('common.status')
      const MP = 'MP' + this.$t('common.status')
      if (name === disk) {
        this.DiskDialogVisible = true
      }
      if (name === DP) {
        this.DataPartitionDialogVisible = true
      }
      if (name === MP) {
        this.MetaPartitionDialogVisible = true
      }
    },
    async showDetail(id, type) {
      if (type === 2) {
        this.DataPartitionDetailDialogVisible = true
        const res = await getDataPartitionList({
          id,
          cluster_name: this.curClusterInfo.clusterName,
        })
        this.PartitionTableData = res.data
      } else {
        this.MetaPartitionDetailDialogVisible = true
        const res = await getMetaPartitionList({
          id,
          cluster_name: this.curClusterInfo.clusterName,
        })
        this.metaPartitionTableData = res.data
      }
    },
    handleSelectionDiskData(val) {
      this.seletedDisk = val
    },
    async batchOfflineDisk() {
      if (!this.seletedDisk.length) {
        this.$message.warning(this.$t('resource.choosedisk'))
      }
      // await batchOfflineDisk(params)
    },
  },
}
</script>
<style lang='scss' scoped>
.height {
  height: 600px;
  width: 100%;
}
</style>
